import React, {useReducer} from 'react';
// import { SpinnerComponent } from 'react-element-spinner';
import {
    NavLink,
    Routes,
    Route,
    Navigate,
    useRoutes
} from "react-router-dom";
//3.第三种方案，导入路由表
import routers from "./routers";

function App(props) {
    //2.在本页中配置路由表
    // const renderRouters = useRoutes([
    //     {
    //         path:'/home',
    //         element:<Home/>,
    //         children:[
    //             {
    //                 path:'news',
    //                 element:<News/>
    //             },{
    //                 path: 'message',
    //                 element: <Message/>,
    //                 children:[
    //                     {
    //                         path:':id',
    //                         element:<Details/>
    //                     }
    //                 ]
    //             },{
    //                 index:true,
    //                 element: <Navigate to={'message'}/>
    //             }
    //         ]
    //     },{
    //         path:'/about',
    //         element: <About/>
    //     },{
    //         path: '/',
    //         element: <Navigate to={'/home'}/>
    //     }
    // ])

    // const [state,dispatch] = useReducer(function (prevState,{type,payload}){
    //     const arr = {...prevState}
    //     if(type==='show'){
    //         arr.isLoading = payload
    //         return arr
    //     }else if(type==='hide'){
    //         arr.isLoading = payload
    //         return arr
    //     }
    // },{isLoading:false})
    return (
        <div>
            {/*<SpinnerComponent loading={state.isLoading} position="global" />*/}
            <div className="row">
                <div className="col-xs-offset-2 col-xs-8">
                    <div className="page-header">
                        <h2>React Router Demo</h2>
                    </div>
                </div>
            </div>
            <div className="row">
                <div className="col-xs-2 col-xs-offset-2">
                    <div className="list-group">
                        <NavLink className="list-group-item" to="/about">About</NavLink>
                        <NavLink className="list-group-item" to="/home">Home</NavLink>
                    </div>
                </div>
                <div className="col-xs-6">
                    <div className="panel">
                        <div className="panel-body">
                            {/*1.原方案*/}
                            {/*<Routes>*/}
                            {/*    <Route path={"/home"} element={<Home/>}>*/}
                            {/*        <Route path={"news"} element={<News/>}></Route>*/}
                            {/*        <Route path={"message"} element={<Message dispatch={dispatch}/>}>*/}
                            {/*            <Route path={':id'} element={<Details/>}/>*/}
                            {/*        </Route>*/}
                            {/*        <Route index element={<Navigate to={'message'}/>}></Route>*/}
                            {/*    </Route>*/}
                            {/*    <Route path={"/about"} element={<About/>}></Route>*/}
                            {/*    <Route path={"/"} element={<Navigate to={"/home"}/>}></Route>*/}
                            {/*</Routes>*/}


                            {/*2-这是配置路由表的方式*/}
                            {
                                routers()
                            }
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}

export default App;